<template>
	<view>
		<pageHeader ref="pageHeader" title="我的收藏" back></pageHeader>

		<view class="header-wrapper" :style="{ height: pageHeaderH+tabsH+'px' }">
			<image class="header-wrapper_bg" src="/static/img/collect_hd_bg.png" mode="scaleToFill"></image>
			<view class="header-tabs" :style="{ marginTop: pageHeaderH+'px' }">
				<view class="header-tabs-item" :class="{ active:activeType==item.type }"
					v-for="(item, index) in collectTypes" @click="changeCollectType(item.type)">{{item.name}}
				</view>
			</view>
		</view>
		<view class="header-wrapper_placeholder" :style="{ height: tabsH+'px'}"></view>

		<view class="list-wrapper">
			<u-list :height="listWrapperH" @scrolltolower="handleLoadMore">
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="activity-box" @click="toDetail(item.activityId)" v-if="activeType==='activity'">
						<image class="activity-img" :src="item.coverImg" mode="aspectFill"></image>
						<view class="activity-box_rt">
							<view class="activity-name">{{item.activityName}}</view>
							<view class="activity-box_rt_bt">
								<view class="activity-info">{{ item.timeStart | formatDate }} -
									{{ item.timeEnd | formatDate }}
								</view>
								<view class="activity-info">{{ item.address || '-' }}</view>
							</view>
						</view>
					</view>
					<view class="activity-box" @click="toDetail(item.campId)" v-else>
						<image class="activity-img" :src="item.coverImg" mode="aspectFill"></image>
						<view class="activity-box_rt">
							<view class="activity-name">{{item.campName}}</view>
							<view class="activity-box_rt_bt">
								<view class="activity-info">{{ item.categoryName }}</view>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-loadmore fontSize="28" marginTop="64" marginBottom="64" line lineColor="rgba(26, 19, 17, .2)"
					nomoreText="没有更多了" :status="loadmore" />
			</u-list>
		</view>
	</view>
</template>

<script>
	import pageHeader from '@/components/pageHeader'
	import {
		getCollectList
	} from '@/api/user.js';
	import {
		dateFormat
	} from '@/utils/util.js';

	const collectTypes = [{
			name: '活动',
			type: 'activity'
		},
		{
			name: '营地',
			type: 'camp'
		}
	]
	export default {
		components: {
			pageHeader
		},
		filters: {
			formatDate(date) {
				return dateFormat('YYYY/mm/dd', new Date(date))
			},
		},
		data() {
			return {
				// 页面传参
				options: {},
				// 顶部导航高度
				pageHeaderH: 0,
				// 顶部tabs高度
				tabsH: 0,
				// 列表滚动高度
				listWrapperH: 0,
				// 收藏类型
				collectTypes: collectTypes,
				// 选中的收藏类型
				activeType: 'activity',
				// 列表
				list: [],
				// 查询参数
				listParams: {
					pageNum: 0,
					pageSize: 10,
				},
				// 底部加载提示
				loadmore: 'loadmore',
			};
		},
		onLoad(options) {
			let that = this
			that.options = options

			this.pageHeaderH = this.$refs.pageHeader.headerH
			let selector = uni.createSelectorQuery().in(this);
			// 获取顶部tabs高度&列表滚动高度
			selector.select(".header-tabs").boundingClientRect(function(data) {
				that.tabsH = data.height
				that.listWrapperH = (uni.getSystemInfoSync().windowHeight - that.tabsH - that.pageHeaderH) + 'px'
			}).exec()
		},
		onShow() {
			this._getCollectList(true)
		},
		methods: {
			// 切换收藏类型查询
			changeCollectType(type) {
				this.activeType = type
				this._getCollectList(true)
			},

			// 获取收藏列表
			_getCollectList(refresh) {
				let that = this
				if (refresh) {
					that.listParams.pageNum = 1
					that.list = []
				} else {
					if (that.loadmore === 'nomore') return
				}
				uni.showLoading()
				that.loadmore = 'loading'
				getCollectList(that.activeType, that.listParams).then(res => {
					that.list = that.list.concat(res.rows)
					if (res.rows.length == that.listParams.pageSize) {
						that.listParams.pageNum++
						that.loadmore = 'loadmore'
					} else {
						that.loadmore = 'nomore'
					}
				}).finally(res => {
					uni.hideLoading()
				})
			},

			// 加载更多
			handleLoadMore() {
				this._getCollectList()
			},

			// 查看详情
			toDetail(ID) {
				if (this.activeType === 'activity') this.$util.navTo(`pages/activity/detail?activityId=${ID}`)
				else if (this.activeType === 'camp') this.$util.navTo(`pages/camp/detail?campId=${ID}`)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;

		.header-wrapper_bg {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.header-tabs {
			display: flex;
			padding: 24rpx 32rpx;

			.header-tabs-item {
				font-size: 64rpx;
				margin-right: 16rpx;
				transition: all 0.2s;
				transform: scale(.8);
				opacity: .6;
				transform-origin: bottom;

				&.active {
					font-weight: bold;
					transform: scale(1);
					opacity: 1;
				}
			}
		}
	}

	.list-wrapper {

		.activity-box {
			display: flex;
			padding: 32rpx;
			position: relative;

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 32rpx;
				right: 32rpx;
				border-top: 1rpx solid #ddd;
			}

			.activity-img {
				display: block;
				width: 320rpx;
				height: 180rpx;
				border-radius: 24rpx;
				flex-shrink: 0;
			}

			.activity-box_rt {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 24rpx;
				overflow: hidden;

				.activity-name {
					font-size: 32rpx;
					line-height: 40rpx;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					margin-bottom: 16rpx;
				}

				.activity-box_rt_bt {
					margin-top: 16rpx;

					.activity-info {
						font-size: 24rpx;
						line-height: 32rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;

						&+.activity-info {
							margin-top: 8rpx;
						}
					}
				}
			}
		}
	}
</style>
